<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="font_cqbiizu5og9/iconfont.css">
    <title>小卖铺</title>

    <link rel="shortcut icon" href="童年模拟器.ico">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/css.css">

    <!--购物车样式-->
    <link rel="stylesheet" type="text/css" href="css/iconfont2.css"/>
    <link rel="stylesheet" type="text/css" href="css/购物车.css"/>
</head>
<style>

    body {
        cursor: pointer;
    }

    .menu {
        position: absolute;
        width: 200px;
        height:100px;
        margin: 0;
        padding: 4px;
        box-shadow: 0 1px 4px rgba(28, 28, 32, .04), 0 8px 24px rgba(28, 28, 32, .12);
        border-radius: 10px;
        background: white;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transition: opacity .2s ease, height .3s ease, visibility .3s ease;
    }

    .is-active {
        opacity: 1;
        visibility: visible;
    }

    .menu-list {
        margin:0px;
        list-style: none;
        height: 22px;
    }

    .menu-item {
        line-height: 22px;
        height:22px;
        color: #25262b;
        font-size: 14px;
        border-radius: 5px;
        padding: 8px;
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        transition: background .3s ease;
    }

    .menu-item:hover {
        line-height: 22px;
        background: #f5f5f6;
    }

    .menu-item-divider {
        height: 1px;
        margin: 4px 8px;
        background: #f5f5f6;
    }

    .menu-item-danger {
        color: #ff6f66;
    }

    .menu-item-danger svg path {
        fill: #ff6f66;
    }

    .menu-item-danger:hover {
        background: #fdd9d8;
    }
</style>
<body>
<body oncontextmenu="openMenu(event)">

<div class="menu">
    <ul class="menu-list">
        <li class="menu-item">
            <span>加入购物车</span>
        </li>
    </ul>
</div>
<div class="topbar"><!--控制背景还有高度-->
    <div class ="container"><!--限制宽度-->
        <div class="topbar-nav">
            <a href="index.html">
                童年模拟器首页
            </a>
            <span>|</span>
            <a href="游戏界面.html">
                童年游戏
            </a>
            <span>|</span>
            <a href="#">
                小卖铺狂欢
            </a>
            <span>|</span>
            <a href="#">
                随机童谣生成器
            </a>
            <span>|</span>
            <a href="#">
                童年歌曲大赏
            </a>
            <span>|</span>
            <a href="#">
                看电视
            </a>

        </div>
        <div class="topbar-info">
            <a href="登录.html">
                登录
            </a>
            <span>|</span>
            <a href="注册.html">
                注册
            </a>
            <a href="#">
                消息通知
            </a>
        </div>
        <div class="topbar-cart">
            <a href="#">
                小卖铺购物车
                <span>(0)</span>
            </a>

        </div>
    </div>
</div>
<div class="menu"></div>
<ul>
    <li><a href="#">
        <div class="tu">
            <img src="./img/卫龙辣条.png" alt="">
        </div>
        <h4>卫龙辣条</h4>
        <p>哈哈哈哈</p>
        <span>0.5￥</span>

    </a></li>

</ul>
<ul>
    <li><a href="#">
        <div class="tu">
            <img src="./img/卫龙辣条.png" alt="">
        </div>
        <h4>卫龙辣条</h4>
        <p>哈哈哈哈</p>
        <span>0.5￥</span>
    </a></li>

</ul>
<ul>
    <li><a href="#">
        <div class="tu">
            <img src="./img/卫龙辣条.png" alt="">
        </div>
        <h4>卫龙辣条</h4>
        <p>哈哈哈哈</p>
        <span>0.5￥</span>
    </a></li>

</ul>
<ul>
    <li><a href="#">
        <div class="tu">
            <img src="./img/卫龙辣条.png" alt="">
        </div>
        <h4>卫龙辣条</h4>
        <p>哈哈哈哈</p>
        <span>0.5￥</span>
    </a></li>

</ul>
<ul>
    <li><a href="#">
        <div class="tu">
            <img src="./img/卫龙辣条.png" alt="">
        </div>
        <h4>卫龙辣条</h4>
        <p>哈哈哈哈</p>
        <span>0.5￥</span>
    </a></li>

</ul>

<ul>
    <li><a href="#">
        <div class="tu">
            <img src="./img/卫龙辣条.png" alt="">
        </div>
        <h4>卫龙辣条</h4>
        <p>哈哈哈哈</p>
        <span>0.5￥</span>
    </a></li>

</ul>


<script>
    window.onload = () => {
        const menu = document.querySelector('.menu')
        const menuHeight = menu.offsetHeight - parseInt(getComputedStyle(menu)['paddingTop']) - parseInt(getComputedStyle(menu)['paddingBottom'])
        menu.style.height = '0'

        openMenu = e => {
            e.preventDefault()

            menu.style.left = `${e.clientX}px`
            menu.style.top = `${e.clientY + 5}px`
            menu.style.height = `${menuHeight}px`
            menu.classList.add('is-active')

            return false
        }

        colseMenu = () => {
            menu.style.height = '0'
            menu.classList.remove('is-active')
        }

        window.onclick = () => colseMenu()
    }
</script>
</body>

</html>